<template>
  <div>
    <a-row>
      <a-col :span="24">
        <a-form layout="inline">
          <a-form-item label="保险单号">
            <a-input v-model="searchForm.insuranceNo"/>
          </a-form-item>
          <a-form-item label="保险种类">
            <a-select v-model="searchForm.insuranceType" class="selectWidth">
              <a-select-option value="">全部</a-select-option>
              <a-select-option value="商业险">商业险</a-select-option>
              <a-select-option value="交强险">交强险</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="保险状态">
            <a-select v-model="searchForm.insuranceStatus" class="selectWidth">
              <a-select-option value="">全部</a-select-option>
              <a-select-option :value="1">即将到期</a-select-option>
              <a-select-option :value="2">未到期</a-select-option>
              <a-select-option :value="3">已过期</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="签单日期">
            <a-range-picker @change="onChangeSignTime">
              <a-icon slot="suffixIcon" type="calendar" />
            </a-range-picker>
          </a-form-item>
          <a-form-item label="保险终止日期">
            <a-range-picker @change="onChangeEndTime">
              <a-icon slot="suffixIcon" type="calendar" />
            </a-range-picker>
          </a-form-item>

          <a-form-item>
            <a-button type="primary" @click="handleSubmit1">查询</a-button>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="exportExcel">导出excel</a-button>
          </a-form-item>
        </a-form>

        <a-table :columns="columns" :data-source="tableData" class="tableMargin" :pagination="pagination"  :scroll="{ x: 1300 }" rowKey="contractDetailId">
          <span slot="udTitle">
            总整备质量(kg)
            <a-tooltip>
              <template slot="title">
                总整备质量=牵引车整备质量+挂车整备质量
              </template>
              <a-icon type="question-circle" />
            </a-tooltip>
          </span>
          <template slot="operation" slot-scope="text, record">
            <a @click="viewInsuranceDetail(record.contractDetailId)">查看保单</a>
          </template>
        </a-table>
      </a-col>
    </a-row>
    <a-modal :footer="null" width="640px"
             :visible="visible"
             @cancel="onCancel"
             title="查看保单">
      <insurance-detail :id="contractDetailId"/>
    </a-modal>
  </div>
</template>

<script>
import {queryTruckContractDetailList} from '@/api/landCenter'
import insuranceDetail from './tractorAndRailerDetailTab2Modal'
import {commonExport} from '@/api/request'

export default {
  name: 'truck-insurance-record',
  props: ['id'],
  components: {
    [insuranceDetail.name]: insuranceDetail
  },
  data () {
    const columns = [
      {
        title: '保险单号',
        dataIndex: 'insuranceNo',
        width: 100,
        customRender: (text, record, index) => {
          if (record.insuranceStatus === 1) {
            // 即将到期
            return <div>{text}<span class='redMsg'>到期提醒</span></div>
          }
          return text
        }
      }, {
        title: '保险种类',
        dataIndex: 'insuranceType',
        ellipsis: true
      }, {
        title: '生效日期',
        dataIndex: 'beginTime',
        ellipsis: true
      }, {
        title: '终止日期',
        dataIndex: 'endTime',
        ellipsis: true
      }, {
        title: '保险金额(元)',
        dataIndex: 'insuranceAmount',
        ellipsis: true
      }, {
        title: '保险返点(%)',
        dataIndex: 'insuranceRebate',
        ellipsis: true
      }, {
        title: '保险状态',
        dataIndex: 'insuranceStatus',
        customRender: (text, row, index) => {
          if (text === 1) {
            return '即将到期'
          } else if (text === 2) {
            return '未到期'
          } else if (text === 3) {
            return '已过期'
          }
        },
        _needName: true
      }, {
        title: '签单日期',
        dataIndex: 'signTime',
        ellipsis: true
      }, {
        title: '经办人',
        dataIndex: 'handledBy',
        ellipsis: true
      }, {
        title: '保险公司',
        dataIndex: 'custName',
        ellipsis: true
      }, {
        title: '保险公司联系人',
        dataIndex: 'linkMan1',
        ellipsis: true
      }, {
        title: '保险公司联系电话',
        dataIndex: 'linkManPhone1',
        ellipsis: true
      }, {
        title: '操作',
        fixed: 'right',
        width: 100,
        scopedSlots: {customRender: 'operation'}
      }
    ]
    return {
      searchForm: {
        truckId: null,
        insuranceNo: '', // String 保险单号
        insuranceType: '', // String 保险种类
        insuranceStatus: '', // 保险状态1即将到期 2未到期 3已过期
        signTime1: '', // 签单日期
        signTime2: '', // 签单日期
        endTime1: '', // 终止日期
        endTime2: '' // 终止日期
      },
      columns: columns,
      tableData: [],
      pagination: {},
      pageNum: 1,
      pageSize: 10,
      visible: false,
      contractDetailId: null
    }
  },
  created () {
    this.searchForm.truckId = this.id
  },
  methods: {
    onChangeSignTime (date, dateStr) {
      this.searchForm.signTime1 = dateStr[0]
      this.searchForm.signTime2 = dateStr[1]
    },
    onChangeEndTime (date, dateStr) {
      this.searchForm.endTime1 = dateStr[0]
      this.searchForm.endTime2 = dateStr[1]
    },
    handleSubmit1 () {
      this.pageNum = 1
      this.handleSubmit()
    },
    handleSubmit () {
      queryTruckContractDetailList({
        ...this.searchForm,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(rsp => {
        this.tableData = rsp.data.list
        this.pagination = {
          current: this.pageNum,
          pageSize: rsp.data.pageSize,
          total: rsp.data.total,
          showQuickJumper: false,
          showSizeChanger: true,
          showTotal: total => `共${total}条记录 第${this.pageNum}/${rsp.data.pages}页`,
          onChange: pageNum => {
            this.pageNum = pageNum
            this.handleSubmit()
          },
          onShowSizeChange: (current, size) => {
            this.pageNum = current
            this.pageSize = size
            this.handleSubmit()
          }
        }
      })
    },
    exportExcel () {
      commonExport('/truck/exportTruckContractDetailList', {
        ...this.searchForm,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        columns: this.columns
      })
    },
    viewInsuranceDetail (contractDetailId) {
      this.visible = true
      this.contractDetailId = contractDetailId
    },
    onCancel () {
      this.visible = false
      this.contractDetailId = null
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.handleSubmit()
    })
  }
}
</script>

<style lang="less" scoped>
  /deep/ td{
    position: relative;
    .redMsg {
      position: absolute;
      display: inline-block;
      background: red;
      top: 0;
      width: 60px;
      left: 0;
      font-size: 12px;
      height: 16px;
      text-align: center;
      color: white;
    }
  }
</style>
